import React, { Component } from "react";

class App extends Component {
  state = {
    name: "zhangsan",
    count: 1,
    arr: [1, 2, 3, 4, 5, 6],
  };

  fn() {
    // 改变state的数据必须使用this.setState方法
    // 只有使用setState方法，才能让数据的改变有响应式

    // setState的改变是异步执行的
    // setState还有第二个参数，是一个回调函数, 这个回调函数会在数据改变完以后再执行
    // this.setState(
    //   {
    //     name: "lisi",
    //   },
    //   () => {
    //     console.log(this.state.name);
    //   }
    // );

    // this.setState({
    //   count: this.state.count + 1,
    // });

    // setState的第一个参数，除了可以写对象，还可以写函数

    // 数据改变的时候，改变以后的值如果和前一次的值没有关系的时候，通常用对象的写法更加简单
    // 数据改变的时候，改变以后的值需要依赖前一次值的时候，通常用函数的写法更加安全
    this.setState(
      (prevState) => {
        return {
          count: prevState.count + 1,
        };
      },
      () => {
        console.log(this.state.count);
      }
    );

    // this.setState((prevState) => {
    //   return {
    //     count: prevState.count + 1,
    //   };
    // });
  }

  fn2() {
    this.setState(
      (prevState) => {
        return {
          // arr: prevState.arr.push(9), ×
          // arr: prevState.arr.concat(9), √
          arr: [...prevState.arr, 9],
        };
      },
      () => {
        console.log(this.state.arr);
      }
    );
  }

  render() {
    return (
      <>
        <h2>修改state的值</h2>
        <div>name: {this.state.name}</div>
        <div>count: {this.state.count}</div>
        <button onClick={this.fn.bind(this)}>btn</button>

        <ul>
          {this.state.arr.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
        <button onClick={this.fn2.bind(this)}>btn2</button>
      </>
    );
  }
}

export default App;
